/**
* 店铺 - 组建
*/
<template>
  <div class="h-shop">
    <div class="h-model-title mtb50">
      <h3>金友福 店铺</h3>
      <p>ABOUT JYF</p>
    </div>
    <!-- 店铺 - banner -->
    <el-carousel class="h-banner" indicator-position="none" :height="bannerHeight">
        <el-carousel-item :key="item.id" v-for="item in list">
            <img :src="item.url"/>
        </el-carousel-item>
        <!-- <el-carousel-item>
            <img src="../../assets/img/shop-1.jpg"/>
        </el-carousel-item>
        <el-carousel-item>
            <img src="../../assets/img/shop-2.jpg"/>
        </el-carousel-item>
        <el-carousel-item>
            <img src="../../assets/img/shop-3.jpg"/>
        </el-carousel-item>
        <el-carousel-item>
            <img src="../../assets/img/shop-4.jpg"/>
        </el-carousel-item> -->
    </el-carousel>
    <!-- 店铺 - 简介 轮播图 -->
    <div class="h-carousel" v-if="terminal === 'pc'">
      <el-carousel indicator-position="outside" height="400px">
        <el-carousel-item :key="item.id" v-for="item in list">
          <img   :key="val.ordernum" v-for="val in item.list" :src="val.url" />
          <!-- <img src="../../assets/img/shop1-2.jpg"/>
          <img src="../../assets/img/shop1-3.jpg"/> -->
        </el-carousel-item>
        <!-- <el-carousel-item>
          <img src="../../assets/img/shop1-1.jpg"/>
          <img src="../../assets/img/shop1-2.jpg"/>
          <img src="../../assets/img/shop1-3.jpg"/>
        </el-carousel-item>
        <el-carousel-item>
            <img src="../../assets/img/shop1-1.jpg"/>
          <img src="../../assets/img/shop1-2.jpg"/>
          <img src="../../assets/img/shop1-3.jpg"/>
        </el-carousel-item> -->
    </el-carousel>
    </div>
    <div v-else class="h-carousel-ph">
      <div  :key="item.id" v-for="item in list">
              <img  :key="val.ordernum" v-for="val in item.list" :src="val.url"/>
      </div>
      
      <!-- <img src="../../assets/img/zhi-i1.jpg"/>
      <img src="../../assets/img/zhi-i1.jpg"/> -->
    </div>
  </div>
</template>
<script>
//import { footerList } from '@/mock' // 脚部数据
import { shopImgData } from '@/api'

export default {
  name: 'Shop',
  props: {},
  data () {
    return {
      list: [], // banner 数据
    
      terminal: '', // 终端类型
      bannerHeight: '700px',
      footerData: [],
    }
  },
  created () {
    this.terminal = localStorage.getItem('terminalm')
    if(this.terminal === 'pc') {
      this.bannerHeight = '700px'
    } else {
      this.bannerHeight = '250px'
    }
    console.log('this.terminal***', this.terminal)
     this.getImgData() // 底部数据加载
  },
  mounted () {
    //this.footerData = footerList.result // 使用接口时 此处删除
  },
  methods: {
    getImgData () {
      const params = { // 请求参数 --- 根据情况 是否需要
        id: '111'
      }
      shopImgData(params).then(res => {
        this.list = res
        
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .h-banner {
    img{
      width: 100%;
      height: 100%;
    }
  }
  .h-carousel{
    margin-top: 20px;
    .el-carousel__item{
      display: flex;
      justify-content: space-between;
    }
    img{
      width: 340px;
      height: 100%;
    }
  }
  /* 移动端 */
  .h-carousel-ph{
    padding: 0 15px;
    img{
      width: 100%;
      margin: 10px 0;
    }
  }
</style>
